<template>
	<div>
		<el-button type="primary" size="default" @click="handleRow"
			>添加行</el-button
		>
		<el-button type="primary" size="default" @click="">添加自定义列</el-button>
		<el-table
			:data="tableData"
			style="width: 100%"
			border
			:span-method="handleMethod"
		>
			<el-table-column prop="attr" label="属性">
				<template #default="scope">
					{{ scope.row.attr }}
					<span
						style="color: red; margin-right: 5px; cursor: pointer"
						@click="handleDel(scope.$index)"
						>X</span
					>
					<span
						style="color: green; border: 1px solid green; cursor: pointer"
						@click="handleAdd(scope.$index)"
						>+</span
					>
				</template>
			</el-table-column>
			<el-table-column prop="tiaojian" label="条件">
				<template #default="scope">
					无
					<span style="margin-right: 5px; cursor: pointer">设置</span>
				</template>
			</el-table-column>
			<el-table-column prop="fenzhi" label="分值" />
		</el-table>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const tableData = ref<any>([]);

const handleRow = () => {
	tableData.value.push({
		attr: "请选择属性",
		tiaojian: "",
		fenzhi: "",
	});
};
let hebing: any = ref(null);
const handleDel = (index: number) => {
	tableData.value.splice(index, 1);
};

const handleAdd = (index: number) => {
	hebing.value = {
		rowIndex: index,
		columnIndex: 0,
		rowspan: 2,
		colspan: 1,
	};
};
const handleMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (
		hebing.value &&
		(rowIndex === hebing.value.rowIndex ||
			rowIndex === hebing.value.rowIndex + 1) &&
		columnIndex === hebing.value.columnIndex
	) {
		return {
			rowspan: hebing.value.rowspan,
			colspan: hebing.value.colspan,
		};
	}
};
</script>

<style scoped></style>
